<template>
  <div class="company">
    <!-- 头部 -->

    <div class="header">
      <van-sticky>
        <!-- 搜索 -->
        <div class="search">
          <van-search
            v-model="value"
            shape="round"
            placeholder="请输入搜索关键词"
          >
            <template #left>
              <div class="title">
                公司
              </div>
            </template>
          </van-search>
        </div>
      </van-sticky>
      <!-- 广告 -->
      <div class="ad" v-if="!show">
        <img
          src="https://img02.mockplus.cn/idoc/sketch/2020-09-10/d4a59041-325e-4294-8f3e-b22564debd55.B3A4ED14-54AF-40B1-B522-94493E2FDED6.png"
          alt=""
        />
      </div>
      <van-sticky offset-top="54">
        <!-- 筛选 -->
        <div class="screen">
          <!-- 推荐 -->
          <div
            :class="{ active: distance === undefined && score === undefined }"
            class="item"
            @click="recom"
          >
            推荐
          </div>
          <!-- 距离 -->
          <div class="item" @click="filtrationDist">
            <p>距离</p>
            <div class="iconBox">
              <i
                :class="{ active: distance === 'asc' }"
                class="iconfont iconicon_xuanze_sel up"
              ></i>
              <i
                :class="{ active: distance === 'desc' }"
                class="iconfont iconicon_xuanze_sel down"
              ></i>
            </div>
          </div>
          <!-- 评分 -->
          <div class="item" @click="filtrationScore">
            <p>评分</p>
            <div class="iconBox">
              <i
                :class="{ active: score === 'asc' }"
                class="iconfont iconicon_xuanze_sel up"
              ></i>
              <i
                :class="{ active: score === 'desc' }"
                class="iconfont iconicon_xuanze_sel down"
              ></i>
            </div>
          </div>
          <!-- 筛选 -->
          <div
            :class="{ active: show }"
            class="item filtrate"
            @click="show = true"
          >
            筛选
          </div>
        </div>
      </van-sticky>
    </div>
    <!-- 企业列表 -->
    <div class="companyList">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="companyItem"
          v-for="(item, index) in companyList"
          :key="index"
        >
          <div class="logo">
            <img :src="baseUrl + item.logo" alt="" />
          </div>
          <div class="details">
            <div class="name">{{ item.name }}</div>
            <div class="dist">{{ item.region }} {{ item.distance }}</div>
            <div class="tags">
              <span>{{ item.type }}</span>
              <span>{{ item.step }}</span>
              <span>{{ item.scale }}</span>
            </div>
            <div class="hire">
              在招职位：<span style="color:#00b8d4">{{ item.positions }}</span>
              / 最后更新时间：{{ item.updated_at | timeFormat }}
            </div>
          </div>
          <div class="comment">{{ item.score }}分</div>
        </div>
      </van-list>
    </div>
    <!-- 筛选 -->
    <van-popup v-model="show" position="top" duration="0">
      <div class="conditionBox">
        <div class="condition">
          <h2>距离</h2>
          <ul>
            <li
              :class="{ activeBg: distance === 'desc' }"
              @click="distance = 'desc'"
            >
              由远及近
            </li>
            <li
              :class="{ activeBg: distance === 'asc' }"
              @click="distance = 'asc'"
            >
              由近及远
            </li>
          </ul>
        </div>
        <div class="condition">
          <h2>评分</h2>
          <ul>
            <li
              @click="scoreRange = item.value"
              :class="{ activeBg: scoreRange === item.value }"
              v-for="(item, index) in scoreArr"
              :key="index"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
      </div>
      <div class="btns">
        <van-button class="clearBtn" @click="clearBtn">清除</van-button>
        <van-button class="suerBtn" type="danger" @click="suerBtn"
          >确定</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { apiGetCompaniesList } from '@/api/company.js'
export default {
  data () {
    return {
      // 基地址
      baseUrl: process.env.VUE_APP_URL,
      // 搜索
      value: '',
      //   加载状态
      loading: false,
      //   是否已加载完成
      finished: false,
      //   起始索引
      start: 0,
      //   个数
      limit: 5,
      //   距离筛选条件
      distance: undefined,
      //   评分筛选条件
      score: undefined,
      //   范围
      scoreRange: undefined,
      // 企业列表
      companyList: [],
      //   筛选框
      show: false,
      // 评分
      scoreArr: [
        { text: '4分-5分', value: '4-5' },
        { text: '3分-3.9分', value: '3-3.9' },
        { text: '2分-2.9分', value: '2-2.9' },
        { text: '1分-1.9分', value: '1-1.9' },
        { text: '1分以下', value: '0-0.9' }
      ]
    }
  },
  methods: {
    // 共用清除
    clear () {
      this.companyList = []
      this.start = 0
      this.loading = false
      this.finished = false
      this.onLoad()
    },
    // 确定
    suerBtn () {
      if (
        this.distance === undefined &&
        this.score === undefined &&
        this.scoreRange === undefined
      ) {
        this.show = false
        return
      }
      this.clear()
      this.show = false
    },
    // 清除
    clearBtn () {
      if (
        this.distance === undefined &&
        this.score === undefined &&
        this.scoreRange === undefined
      ) {
        this.show = false
        return
      }
      this.distance = undefined
      this.score = undefined
      this.scoreRange = undefined
      this.clear()
      this.show = false
    },
    // 推荐
    recom () {
      if (this.distance === undefined && this.score === undefined) {
        return
      }
      this.distance = undefined
      this.score = undefined
      this.scoreRange = undefined
      this.clear()
    },
    // 筛选评分
    filtrationScore () {
      if (this.score === undefined) {
        this.score = 'asc'
      } else {
        this.score = this.score === 'asc' ? 'desc' : 'asc'
      }
      this.clear()
    },
    // 筛选距离
    filtrationDist () {
      if (this.distance === undefined) {
        this.distance = 'asc'
      } else {
        this.distance = this.distance === 'asc' ? 'desc' : 'asc'
      }
      this.clear()
    },
    // 获取企业列表
    async onLoad () {
      const res = await apiGetCompaniesList({
        start: this.start,
        limit: this.limit,
        q: this.value,
        distance: this.distance,
        score: this.score,
        scoreRange: this.scoreRange
      })
      this.companyList.push(...res.data.list)
      this.loading = false
      this.start += this.limit
      if (this.companyList.length >= res.data.total) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.company {
  font-size: 12px;
  background: #fff;
  //   height: 100%;
  .header {
    background: #fff;
    .search {
      .title {
        font-size: 18px;
        font-weight: 600;
        color: #222;
        margin-right: 19px;
      }
    }
    .ad {
      height: 127px;
      padding: 0 15px;
      margin-top: 10px;
      img {
        width: 100%;
      }
    }
    .screen {
      padding: 20px 15px;
      display: flex;
      background: #fff;
      .item {
        display: flex;
        flex: 1;
        align-items: center;
        font-size: 14px;
        .iconBox {
          .iconfont {
            display: block;
            line-height: 10px;
            color: #b4b4bd;
          }
          .up {
            transform: rotate(180deg);
          }
        }
      }
      .filtrate {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .companyList {
    padding: 0 15px;
    background: #fff;
    .companyItem {
      border-bottom: 2px solid #f7f4f5;
      display: flex;
      margin-top: 20px;

      .logo {
        width: 65px;
        height: 65px;
        margin-right: 15px;
        img {
          width: 100%;
        }
      }
      .details {
        flex: 1;
        .name {
          font-size: 18px;
          font-weight: 600;
          color: #19232b;
        }
        .dist {
          color: #545671;
          margin-top: 10px;
        }
        .tags {
          margin-top: 12px;
          span {
            background: #f7f4f5;
            border-radius: 3px;
            padding: 5px;
            color: #b4b4bd;
            margin-right: 10px;
          }
        }
        .hire {
          margin-top: 20px;
          color: #b4b4bd;
          margin-bottom: 20px;
          line-height: 21px;
          white-space: nowrap;
        }
      }
      .comment {
        width: 50px;
        text-align: left;
      }
    }
  }
  .active {
    color: #e40137 !important;
  }
  .activeBg {
    color: #e40137 !important;
    border: 1px solid #e40137 !important;
    background: #ffe2e9 !important;
  }
  /deep/.van-popup--top,
  /deep/.van-overlay {
    top: 108px;
  }
  .conditionBox {
    padding: 0 15px;
    .condition {
      ul {
        display: flex;
        margin-bottom: 18px;
        margin-top: 20px;
        flex-wrap: wrap;
        li {
          box-sizing: border-box;
          width: 48%;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background: #f9f8f8;
          border-radius: 4px;
          margin-bottom: 10px;
          &:nth-child(odd) {
            margin-right: 4%;
          }
        }
      }
    }
  }
  .btns {
    display: flex;
    padding: 0 15px 20px;
    .clearBtn {
      width: 35%;
      margin-right: 4%;
      background: #ffe2e9;
      color: #e40137;
      border: none;
    }
    .suerBtn {
      width: 61%;
    }
    /deep/.van-button {
      border-radius: 7px;
    }
  }
}
</style>
